import styled from 'styled-components';
import logoUrl from '../../assets/images/logo.png';
import searchBg from '../../assets/images/personal.jpg';
import closeImg from '../../assets/images/close.svg';

export const HeaderWrapper = styled.div`
  width: 100%;
  height: 70px;
  transition: all .4s ease-in-out;
  background-color: rgba(18,18,24, 0.95);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
`

export const Logo = styled.span`
  width: 146px;
  display: block;
  height: 70px;
  display: flex;
  align-items: center;
  margin-right: 30px;
  background-image: url(${logoUrl});
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 146px 26px;
`

export const Nav = styled.div`
  flex: 1;
`

export const NavItem = styled.span`
  font-size: 14px;
  height: 100%;
  padding: 0 15px;
  position: relative;
  cursor: pointer;
  a.active {
    color: #F4606C;
  }
  &.active a {
    color: #F4606C;
  }
  &:hover a {
    color: #F4606C;
  }
  a.active::after {
    content: "";
    position: absolute;
    background: #F4606C;
    left: 0;
    right: 0;
    bottom: -12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin: 0 auto;
    opacity: 1;
  }
`

export const Search = styled.div`
  height: 100%;
  display: flex;
  align-items: center;
  i {
    font-size: 22px;
    color: #ffffff;
    padding: 0 15px;
    cursor: pointer;
  }
`

export const UserBox = styled.div`
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 20px;
  .line {
    width: 1px;
    height: 22px;
    background: #ffffff;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -11px;
  }
  .is-login {
    height: 70px;
    .avatar-box {
      height: 100%;
      position: relative;
      &::after {
        display: inline-block;
        margin-left: 0.3em;
        vertical-align: 0.1em;
        content: "";
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-bottom: 0;
        border-left: 0.35em solid transparent;
        transition: all 0.3s ease-in-out;
      }
      .avatar {
        margin-right: 8px;
      }
      .user-dropdown {
        position: absolute;
        background-color: #313435;
        width: 110px;
        right: 0;
        top: 60px;
        opacity: 0;
        visibility: hidden;
        z-index: 999;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        transform: translateY(20px);
        ul {
          font-size: 0.75rem;
          padding: 0.5rem;
          li {
            padding: 0.5rem;
            transition: all 0.3s ease-in-out;
            a {
              color: rgba(255, 255, 255, 0.8);
              img {
                width: 14px;
                margin-right: 8px;
              }
            }
            &:hover {
              margin-left: 5px;
              a {
                color: #fff;
              }
            }
          }
        }
      }
      &:hover {
        &::after {
          transform:rotate(180deg);
        }
        .user-dropdown {
          visibility: visible;
          opacity: 1;
          transform: translateY(0px);
          display: initial;
        }
      }
    }
  }
  .no-login {
    font-size: 14px;
  }
`

export const SearchBox = styled.div`
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  .overlay {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(29, 31, 32, 0.75);
    opacity: 0;
    transition: opacity .3s;
    -webkit-backface-visibility: hidden;
    transition-duration: .3s;
  }
  .search-body {
    position: relative;
    opacity: 0;
    width: 100%;
    max-width: 790px;
    animation-duration: .3s;
    animation-fill-mode: forwards;
    .search-content {
      background: #fff;
      position: relative;
      border-radius: 4px;
      box-shadow: 0 10px 50px -5px rgba(6, 39, 67, 0.12);
      padding: 0;
      border: 0;
      width: 100%;
      height: auto;
      overflow: hidden;
      .search-popup-cover {
        position: relative;
        overflow: hidden;
        padding: 3rem;
        .bg-effect {
          background-image: url(${searchBg});
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          filter: blur(8px);
          transform: scale(1.05);
          background-position: center;
          .layer {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
            position: absolute;
            opacity: 1;
            top: 0;
            left: 0;
            transition: opacity 0.3s ease-in-out;
          }
        }
        .search-form {
          position: relative;
          padding: 3rem 0;
          .text {
            display: block;
            width: 100%;
            background-clip: padding-box;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            font-size: .9375rem;
            line-height: 1.5;
            padding: .625rem .75rem;
            height: calc(1.5em + 1.71875rem + 2px);
            text-align: center;
            font-weight: normal;
            color: #fff;
            border-color: transparent;
            background-color: rgba(255, 255, 255, 0.03);
            transition: all .3s ease;
            border-radius: 5px;
            &:hover {
              background-color: rgba(255, 255, 255, 0.04);
              border-color: transparent;
            }
            &:focus {
              background-color: rgba(255, 255, 255, 0.04);
              border-color: transparent;
              color: #fff;
            }
            &::placeholder {
              color: #fff;
              opacity: 1
            }
          }
        }
      }
      .search-hot {
        padding: 1.5rem 3rem;
        .title {
          margin-bottom: 15px;
          i {
            font-size: 1.225rem;
            margin-right: 8px;
            color: #F4606C;
          }
          .nicelishi {
            font-size: 1.425rem;
          }
          span {
            font-size: 14px;
            flex: 1;
            color: #333;
          }
          p {
            color: $color-theme;
            cursor: pointer;
          }
        }
        .tags {
          width: 100%;
          margin: 0 -0.25rem;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          li {
            padding: 0.25rem;
            cursor: pointer;
            .btn {
              display: flex;
              font-weight: 400;
              color: #6D7685;
              background-color: #f4f4f5;
              text-align: center;
              vertical-align: middle;
              user-select: none;
              border: 1px solid transparent;
              font-size: .75rem;
              padding: .3125rem .75rem;
              line-height: 1.5;
              border-radius: .25rem;
              transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
              border-radius: 4px;
              .close-dark {
                display: inline-block;
                background-image: url('../../../assets/images/close-dark.svg');
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                vertical-align: middle;
                width: 14px;
                height: 14px;
                margin-left: 8px;
                opacity: 0.7;
              }
              &:hover {
                color: #161E27;
                .close-dark {
                  opacity: 1;
                }
              }
            }
          }
        }
      }
    }
    .btn-close {
      position: absolute;
      bottom: -50px;
      left: 0;
      width: 100%;
      z-index: 99;
      cursor: pointer;
      text-align: center;
      .close-light {
        display: inline-block;
        background-image: url(${closeImg});
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        vertical-align: middle;
        width: 28px;
        height: 28px;
      }
    }
  }
  &.open {
    z-index: 1031;
    .overlay {
      opacity: 1;
      pointer-events: auto;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    .search-body {
      pointer-events: auto;
      -webkit-animation-name: tips-open;
      animation-name: tips-open;
    }
  }
  &.close {
    .search-body {
      -webkit-animation-name: tips-close;
      animation-name: tips-close
    }
  }

`

export const hotList = styled.li`

`